import { MemberService as UserService } from 'admin/services/member';
import { siteMap } from 'admin/pageNodes';
import { FormValidator, rules } from "maishu-dilu";
import site from 'admin/site';

import * as ui from "maishu-ui-toolkit";
import React = require('react');
import ReactDOM = require('react-dom');
import * as chitu from "maishu-chitu";
import { PageProps } from 'maishu-chitu-react';
import { AdminApplication } from '../../application';

// export default async function (page: chitu.Page) {
//     app.loadCSS(page.name);
//     let userService = page.createService(UserService);
//     let apps = await userService.stores();

//     ReactDOM.render(<MyStoresPage />, page.element);
// } 

interface Props extends PageProps {
    app: AdminApplication
}

export default class MyStoresPage extends React.Component<Props, { stores: Array<Store> }>{
    private dialogElement: HTMLElement;
    private nameInput: HTMLInputElement;
    private validator: FormValidator;
    userService: UserService;

    constructor(props: Props) {
        super(props);
        this.props.app.loadCSS(props.source.name);
        this.state = { stores: [] };
        this.userService = this.props.createService(UserService)
    }
    componentDidMount() {
        this.validator = new FormValidator(this.dialogElement,
            { name: "name", rules: [rules.required('请输入店铺名称')] }
        )
        this.userService.stores().then(items => {
            this.setState({ stores: items })
        })
    }
    async save(app: Store): Promise<any> {
        let isValid = await this.validator.check();
        if (!isValid) {
            return Promise.resolve();
        }

        let p: Promise<any>;
        if (!app.Id) {
            p = this.userService.addStore(app).then(data => {
                this.state.stores.push(app);
            });
        }
        else {
            p = this.userService.updateStore(app).then(data => {
                this.setState(this.state);
            });
        }

        p.then(() => {
            ui.hideDialog(this.dialogElement);
            this.setState(this.state)
        });
        return p;
    }
    delete(app: Store) {
        return this.userService.deleteStore(app).then(data => {
            // this.state.stores = this.state.stores.filter(o => o != app);
            // this.setState(this.state);
            this.setState({ stores: this.state.stores.filter(o => o != app) })
            return data;
        });
    }
    showDialog(app: Store) {
        let msg = app.Id == null ? '创建店铺成功' : '更新店铺成功';
        ReactDOM.render(
            <div className="modal-dialog" role="document">
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 className="modal-title">创建店铺</h4>
                    </div>
                    <div className="modal-body form-horizontal">
                        <div className="form-group">
                            <label className="col-sm-2">
                                名称
                            </label>
                            <div className="col-sm-10">
                                <input name="name" type="text" className="form-control" autoFocus={true}
                                    ref={(e: HTMLInputElement) => {
                                        if (!e) return;
                                        this.nameInput = e;
                                        e.value = app.Name || '';
                                    }} />
                            </div>
                        </div>
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-default" data-dismiss="modal"
                            ref={(e: HTMLButtonElement) => {
                                if (!e) return;
                                e.onclick = () => ui.hideDialog(this.dialogElement)

                            }}>取消</button>
                        <button type="button" className="btn btn-primary"
                            ref={(e: HTMLButtonElement) => {
                                if (!e) return;
                                e.onclick = ui.buttonOnClick(() => {
                                    app.Name = this.nameInput.value;
                                    return this.save(app);
                                })
                            }}>确定</button>
                    </div>
                </div>
            </div>, this.dialogElement);

        ui.showDialog(this.dialogElement);
    }
    edit(app: Store) {
        this.nameInput.value = app.Name;
        ui.showDialog(this.dialogElement);
    }
    render() {
        let stores = this.state.stores || [];
        return (
            <div>
                <div className="modal fade" role="dialog"
                    ref={(e: HTMLElement) => this.dialogElement = e || this.dialogElement}>

                </div>
                <ul>
                    {stores.map(o =>
                        <li key={o.Id}>
                            <div className="header">
                                <p>
                                    <span className="smaller lighter green interception">{o.Name}</span>
                                    <i className="icon-remove pull-right"
                                        ref={(e: HTMLElement) => {
                                            if (!e) return;
                                            e.onclick = ui.buttonOnClick(() => this.delete(o), { confirm: `你确定要删除店铺'${o.Name}'?` });
                                        }} />
                                </p>
                            </div>
                            <div className="body">
                                <div>
                                    <div className="pull-left">
                                        名称
                                        </div>
                                    <div className="text interception">
                                        {o.Name}
                                    </div>
                                </div>
                            </div>
                            <div className="footer">
                                <div className="col-xs-6">
                                    <button className="btn btn-primary btn-block"
                                        onClick={() => this.showDialog(o)}>编辑</button>
                                </div>
                                <div className="col-xs-6">
                                    <button className="btn btn-success btn-block"
                                        data-url={site.storeUrl(o.Id)}
                                        onClick={() => {
                                            let pageName = (siteMap.nodes.home_index).name;
                                            console.assert(pageName != null);
                                            location.href = site.storeUrl(o.Id);
                                        }}
                                    >进入</button>
                                </div>
                            </div>
                        </li>
                    )}
                    <li>
                        <div className="header">
                            <p className="smaller lighter green">
                                创建店铺
                                </p>
                        </div>
                        <div onClick={() => this.showDialog({} as Store)} className="add">
                            <i className="icon-plus" style={{ fontSize: 120 }}></i>
                        </div>
                    </li>
                </ul>
            </div>
        );
    }
}